<template>
  <GoogleAdCollect
      id="6356408794"
      adm-id="div-gpt-ad-1747195389637-0"
      name="APK_List_Display_1"
      parent-page="List"
      @adSuccess="handleAdSuccess"
      @adError="handleAdError"
  />

  <!-- 移动端标签页 -->
  <div class="mobile-tabs">
    <el-tabs v-model="activeTab">
      <el-tab-pane label="TOP FREE APPS" name="apps">
        <div class="free-list">
          <a class="free-item" v-for="(item, index) in topFreeappsData" :key="index" :href="appUrls.get(item.name)">
            <div class="info">
              <div class="id">{{ index + 1 }}</div>
              <img :src="item.icon" :alt="item.name">
              <div class="name-type">
                <div class="name">{{ item.name }}</div>
                <div class="type">{{ item.category }}</div>
              </div>
            </div>
            <div class="get" @click="handleClickApp('TOP FREE APPS', item)">GET</div>
          </a>
        </div>
      </el-tab-pane>
      <el-tab-pane label="TOP FREE GAMES" name="games">
        <div class="free-list">
          <a class="free-item" v-for="(item, index) in topFreegamesData" :key="index" :href="gameUrls.get(item.name)">
            <div class="info">
              <div class="id">{{ index + 1 }}</div>
              <img :src="item.icon" :alt="item.name">
              <div class="name-type">
                <div class="name">{{ item.name }}</div>
                <div class="type">{{ item.category }}</div>
              </div>
            </div>  
            <div class="get" @click="handleClickApp('TOP FREE GAMES', item)">GET</div>
          </a>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>

  <!-- 桌面端双列布局 -->
  <div class="top-free">
    <div class="top-free-apps">
      <div class="title">TOP FREE APPS</div>
      <div class="free-list">
        <a class="free-item" v-for="(item, index) in topFreeappsData" :key="index" :href="appUrls.get(item.name)">
          <div class="info">
            <div class="id">{{ index + 1 }}</div>
            <img :src="item.icon" :alt="item.name">
            <div class="name-type">
              <div class="name">{{ item.name }}</div>
              <div class="type">{{ item.category }}</div>
            </div>
          </div>
          <div class="get" @click="handleClickApp('TOP FREE APPS', item)">GET</div>
        </a>
      </div>
    </div>
    <div class="top-free-games">
      <div class="title">TOP FREE GAMES</div>
      <div class="free-list">
        <a class="free-item" v-for="(item, index) in topFreegamesData" :key="index" :href="gameUrls.get(item.name)">
          <div class="info">
            <div class="id">{{ index + 1 }}</div>
            <img :src="item.icon" :alt="item.name">
            <div class="name-type">
              <div class="name">{{ item.name }}</div>
              <div class="type">{{ item.category }}</div>
            </div>
          </div>
          <div class="get" @click="handleClickApp('TOP FREE GAMES', item)">GET</div>
        </a>
      </div>
    </div>
  </div>

</template>

<script setup>
import { ref, onMounted } from 'vue'
import GoogleAdCollect from '@/components/GoogleAdCollect.vue'
import topFreeappsData from '~/assets/data/top/top_free_apps.json'
import topFreegamesData from '~/assets/data/top/top_free_games.json'
import { homeParams } from '~/utils/homeParams'

const activeTab = ref('apps')
const appUrls = ref(new Map())
const gameUrls = ref(new Map())

definePageMeta({
  title: 'TopRank',
  layout: 'default'
})

const getDetailUrl = (item) => {
  const queryParams = {
    type: 'apps',
    slug: item.slug,
    ...homeParams()
  }
  return `/details?${new URLSearchParams(queryParams).toString()}`
}

// 在组件挂载后生成所有 URL
onMounted(() => {
  logEvent('App_List_Page_Show')

  // 生成 Top Free Apps URLs
  topFreeappsData.forEach(app => {
    appUrls.value.set(app.name, getDetailUrl(app))
  })

  // 生成 Top Free Games URLs
  topFreegamesData.forEach(game => {
    gameUrls.value.set(game.name, getDetailUrl(game))
  })
})

const handleClickApp = (type, item) => {
  logEvent('Click_APP', {
    Subzone: type,
    App: item.name,
  })
}

const handleAdSuccess = () => {
  console.log('广告加载成功')
}

const handleAdError = () => {
  console.log('广告加载失败')
}
</script>

<style scoped lang="scss">
// 移动端标签页样式
.mobile-tabs {
  display: none;
  margin-top: 1rem;

  :deep(.el-tabs__header) {
    margin-bottom: 1rem;
  }

  :deep(.el-tabs__nav-wrap::after) {
    height: 0px;
  }

  :deep(.el-tabs__nav-scroll) {
    display: flex;
    justify-content: center;
  }

  :deep(.el-tabs__active-bar) {
    background-color: #F78B17;
  }

  :deep(.el-tabs__item) {
    font-size: .8rem;
    color: #666;
    
    &.is-active {
      color: #F78B17;
    }
  }
}

// 桌面端双列布局样式
.top-free {
  display: flex;
  gap: 2rem;
  margin-top: 2rem;

  .top-free-apps,
  .top-free-games {
    flex: 0 0 34%;
  }

  .title {
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
  }
}

// 共用列表样式
.free-list {
  display: flex;
  flex-direction: column;
  /* gap: .5rem; */

  .free-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    border-radius: 0.5rem;
    transition: background-color 0.3s;
    cursor: pointer;
    text-decoration: none;
    color: #000;

    &:hover {
      background-color: #f5f5f5;
    }

    .info {
      display: flex;
      align-items: center;
      gap: 1rem;
      flex: 1;
      min-width: 0; /* 防止flex子元素溢出 */

      .id {
        color: #666;
        font-size: 0.9rem;
        flex-shrink: 0; /* 防止序号缩小 */
      }

      img {
        width: 4.5rem;
        height: 4.5rem;
        border-radius: 0.8rem;
        object-fit: cover;
        background-image: url('/img/default.png');
        background-size: 4.5rem 4.5rem;
        background-position: center;
        flex-shrink: 0; /* 防止图片缩小 */
      }

      .name-type {
        flex: 1;
        min-width: 0; /* 让省略号正常工作的关键 */
        
        .name {
          font-size: 0.9rem;
          margin-bottom: 0.3rem;
          font-weight: 500;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .type {
          font-size: 0.8rem;
          color: #666;
        }
      }
    }

    .get {
      font-size: 12px;
      line-height: 24px;
      position: relative;
      flex: 0 0 52px;
      width: 52px;
      height: 24px;
      text-align: center;
      color: #F78B17;
      border: 1px solid #F78B17;
      border-radius: 5px;
      cursor: pointer;
      text-decoration: none;
      &:hover {
        background-color: #F78B17;
        color: white;
        border-color: #F78B17;
        transition: all .25s ease;
      }
    }
    @media screen and (max-width: 768px) {
      gap: .5rem;
    }
  }
}

// 响应式布局
@media screen and (max-width: 768px) {
  .mobile-tabs {
    display: block;
  }

  .top-free {
    display: none;
  }
}
</style>